<template>
  <div id="smart-document">
    <splitpanes horizontal>
      <span class="monaco-editor" splitpanes-size="50" splitpanes-min="10" splitpanes-max="90">
        <monaco id="smart-editor" type="smart-editor" />
      </span>
      <!-- 信息、表数据、（表|数据库）结构信息 -->
      <span class="sql-editor-bottom" splitpanes-size="50" splitpanes-min="10" splitpanes-max="90">
        <el-tabs v-model="sqlEditorTabsValue" type="card">
          <el-tab-pane v-for="item in sqlEditorTabs" :key="item.name" :label="item.name"></el-tab-pane>
        </el-tabs>
        <!-- <div style="height:20px;"></div> -->
        <!-- <hot-table-view /> -->
        <div class="right-bottom-content">
          <monaco id="smart-test" type="smart-test" />
        </div>
      </span>
    </splitpanes>
  </div>
</template>

<script>
import Splitpanes from "splitpanes";
import "splitpanes/dist/splitpanes.css";

// 输入框
import monaco from "@/components/monaco/index.vue";

// 信息
// 表数据
import HotTableView from "@/components/hotTable/index.vue";

// 表信息

export default {
  components: {
    Splitpanes,
    monaco,
    "hot-table-view": HotTableView
  },
  data() {
    return {
      sqlEditorTabs: [
        {
          name: "信息"
        },
        {
          name: "表数据"
        },
        {
          name: "结构信息"
        }
      ],
      sqlEditorTabsValue: "2"
    };
  }
};
</script>

<style lang="scss" scoped>
#smart-document {
  height: 100%;
  width: 100%;
  padding-bottom: 20px;

  .monaco-editor,
  .sql-editor-bottom {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;

    .right-bottom-content {
      flex: 1;
      display: flex;
      flex-direction: column;

      ::v-deep .monaco-editor {
        height: 100% !important;
      }
    }
  }
}
</style>